<template>
  <div class="dashboard-editor-container">

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:5px;">
      <el-col>
        <div class="card-panel-text">
          业主数
        </div>
        <div class="card-panel-num">
          <count-to :start-val="0" :end-val="userNum.ownerNum" :duration="1000" />
        </div>
      </el-col>
      <el-col style="width: 30%">
        <div class="card-panel-text">
          居民数
        </div>
        <div class="card-panel-num">
          <count-to :start-val="0" :end-val="userNum.dwellerNum" :duration="1000" />
        </div>
      </el-col>
      <el-col style="width: 70%">
        <div style="text-align: right; margin-bottom: 5px">
          <el-button type="primary" @click="showChildComponent2 = true">
            人脸登录
          </el-button>
          <el-button type="primary" @click="showChildComponent = true">
            人脸注册
          </el-button>
          <el-button type="primary" @click="generateReports">
            生成报告
          </el-button>
          <el-button type="primary" @click="showChildComponent3 = true">
            视频监控
          </el-button>
          <el-button type="danger" @click="sendEmail">
            紧急报警
          </el-button>
        </div>
      </el-col>
    </el-row>

    <el-dialog v-if="showChildComponent3"
               title="视频监控"
               width="880px"
               :visible="showChildComponent3"
               @close="videoFrame"
    >
      <video-frame ref="videoFrame" :show-video="showVideo" @closeDialog="showChildComponent3 = false"></video-frame>
    </el-dialog>

    <el-dialog v-if="showChildComponent"
               title="人脸注册"
               width="880px"
               :visible="showChildComponent"
               @close="handleDialogClose"
    >
      <face-register ref="faceRegister" :tack-photo="tackPhoto" @closeDialog="showChildComponent = false"></face-register>
    </el-dialog>

    <el-dialog v-if="showChildComponent2"
               title="人脸登录"
               width="880px"
               :visible="showChildComponent2"
               @close="handleDialogClose2"
    >
      <face-login ref="faceLogin" :tack-photo="tackPhoto" @closeDialog="showChildComponent2 = false"></face-login>
    </el-dialog>

    <panel-group :visitor-num="visitorNum"
                 :sale-goods-num="saleGoodsNum"
                 :complaint-num="complaintNum"
                 :payment="payment"
                 @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart :charge-record="chargeRecord" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart :medical="medical"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart :maintenance="maintenance" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import FaceRegister from './components/FaceRegister.vue'
import FaceLogin from './components/FaceLogin.vue'
import CountTo from "vue-count-to"
import { findAllOwner, findChargeList, findChargeRecord, findComplaintList, findComplaintNum, findMaintenance, findMedicalList, findPayment, findSaleGoodsList, findSaleGoodsNum, findVisitorList, findVisitorNumber } from '@/api/echarts'
import {generateWord, sendAlarmEmail} from "@/api/ai-face";
import VideoFrame from "@/views/dashboard/admin/components/VideoFrame.vue";

export default {
  name: 'DashboardAdmin',
  components: {
    VideoFrame,
    CountTo,
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    FaceRegister,
    FaceLogin,
  },
  data() {
    return {
      lineChartData: {},
      userNum: {},
      zeroMonthData: [],
      visitorNum: 0,
      saleGoodsNum: 0,
      complaintNum: 0,
      payment: {
        hasPayment: 0,
        notPayment: 0
      },
      medical: {},
      chargeRecord: {},
      maintenance: {},
      showChildComponent: false,
      showChildComponent2: false,
      showChildComponent3: false,
      tackPhoto: true,
      showVideo: true
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    generateReports() {
      generateWord(this.userNum, this.visitorNum, this.saleGoodsNum, this.complaintNum, this.payment).then(response => {

      })
    },
    videoFrame(){
      this.showChildComponent3 = false;
      this.$refs.videoFrame && this.$refs.videoFrame.closeVideoFrame();
    },
    sendEmail() {
      sendAlarmEmail().then(response => {
        alert(response.msg)
      })
    },
    handleDialogClose2() {
      // 先将控制子组件显示的变量设为false，隐藏对话框
      this.showChildComponent2 = false;
      // 通过ref获取子组件实例并调用其关闭相机的方法（假设子组件有对应的方法）
      this.$refs.faceLogin && this.$refs.faceLogin.closeCamera();
    },
    handleDialogClose() {
      // 先将控制子组件显示的变量设为false，隐藏对话框
      this.showChildComponent = false;
      // 通过ref获取子组件实例并调用其关闭相机的方法（假设子组件有对应的方法）
      this.$refs.faceRegister && this.$refs.faceRegister.closeCamera();
    },
    handleSetLineChartData(type) {
      if (type === 'visitor'){
        this.getVisitorList()
      }
      else if (type === 'complaint'){
        this.getComplaintList()
      }
      else if (type === 'payment'){
        this.getChargeList()
      }
      else if (type === 'saleGoods'){
        this.getSaleGoodsList()
      }
    },
    async loadData() {
      await this.getMedicalList()
      await this.getChargeRecord()
      await this.getMaintenance()
      await this.getUserNum()
      await this.getVisitorNum()
      await this.getPayment()
      await this.getSaleGoodsNum()
      await this.getComplaintNum()
      await this.getVisitorList()
    },
    async getMaintenance(){
      await findMaintenance().then(response => {
        this.maintenance = response.data
      })
    },
    async getChargeRecord(){
      await findChargeRecord().then(response => {
        this.chargeRecord = response.data
      })
    },
    async getMedicalList(){
      await findMedicalList().then(response => {
        this.medical = response.data
      })
    },
    async getUserNum() {
      await findAllOwner().then(response => {
        this.userNum = response.data
      })
    },
    async getChargeList() {
      await findChargeList().then(response => {
        this.lineChartData = response.data
      })
    },
    async getVisitorList() {
      await findVisitorList().then(response => {
        this.lineChartData = response.data
        this.lineChartData.zeroMonthData = this.zeroMonthData
      })
    },
    async getComplaintList() {
      await findComplaintList().then(response => {
        this.lineChartData = response.data
        this.lineChartData.zeroMonthData = this.zeroMonthData
      })
    },
    async getSaleGoodsList() {
      await findSaleGoodsList().then(response => {
        this.lineChartData = response.data
        this.lineChartData.zeroMonthData = this.zeroMonthData
      })
    },
    async getVisitorNum() {
      await findVisitorNumber().then(response => {
        this.visitorNum = response.data.visitorNum
      })
    },
    async getPayment() {
      await findPayment().then(response => {
        this.payment = response.data
      })
    },
    async getSaleGoodsNum() {
      await findSaleGoodsNum().then(response => {
        this.saleGoodsNum = response.data.saleGoodsNum
      })
    },
    async getComplaintNum() {
      await findComplaintNum().then(response => {
        this.complaintNum = response.data.complaintNum
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  .card-panel-text {
    display: inline-block;
    font-weight: bold;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    margin-bottom: 12px;
  }

  .card-panel-num {
    display: inline-block;
    color: #666;
    font-size: 20px;
    font-weight: bold;
    margin-left: 12px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
